import React,{Component} from 'react';
import 'antd/dist/antd.css';
import { Input,Button,List} from 'antd';
//通过connect获取store中的数据
import {connect} from 'react-redux';

//UI组件
// class TodoList extends Component {
//     render(){
//         const {inputValue,changeInputValue,addTodoItem,list,delTodoItem}=this.props;
//         return (
//             <div style={{'marginTop':'10px','marginLeft':'10px'}}>
//                 <div>
//                     <Input 
//                         placeholder="todo info" 
//                         style={{'width':'300px','marginRight':'10px'}} 
//                         value={inputValue}
//                         onChange={changeInputValue}
//                     />
//                     <Button type="primary" onClick={addTodoItem}>提交</Button>
//                 </div>
                
//                 <List
//                     style={{marginTop:'10px',width:'300px'}}
//                     bordered
//                     dataSource={list}
//                     renderItem={(item,index)=>(<List.Item onClick={()=>{delTodoItem(index)}}>{item}</List.Item>)}               
//                 />
//             </div>
//         )
//     }
// }

//无状态组件
const TodoList = (props) => {
        const {inputValue,changeInputValue,addTodoItem,list,delTodoItem}=props;
        return (
            <div style={{'marginTop':'10px','marginLeft':'10px'}}>
                <div>
                    <Input 
                        placeholder="todo info" 
                        style={{'width':'300px','marginRight':'10px'}} 
                        value={inputValue}
                        onChange={changeInputValue}
                    />
                    <Button type="primary" onClick={addTodoItem}>提交</Button>
                </div>
                
                <List
                    style={{marginTop:'10px',width:'300px'}}
                    bordered
                    dataSource={list}
                    renderItem={(item,index)=>(<List.Item onClick={()=>{delTodoItem(index)}}>{item}</List.Item>)}               
                />
            </div>
        )
}

//连接规则
const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

//将store.dispatch方法挂载到props上，即store.dispatch.props
const mapDsipatchToProps = (dispatch) => {
    return {
        changeInputValue(e){
            const action = {
                type:'change_input_value',
                value:e.target.value
            }
            dispatch(action);
        },
        addTodoItem(){
            const action = {
                type:'add_todo_item'
            }
            dispatch(action);
        },
        delTodoItem(index){
            const action = {
                type:'del_todo_item',
                value:index
            }
            dispatch(action);
        }
    }
}

//connect方法让TodoList与store做连接
export default connect(mapStateToProps,mapDsipatchToProps)(TodoList);